<template>
  <div style="height: 80vh">
    <div
      style="
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        height: 48px;
        padding: 0 10px;
        border: #bfbfbf 1px solid;
        border-radius: 4px;
        margin-bottom: 6px;
      "
    >
      <el-button type="primary" @click="saveCode">保存代码</el-button>
      <el-button plain type="primary" @click="getList">重置代码</el-button>
      <el-button type="primary" @click="defineBlockShow = !defineBlockShow">
        <icon :icon="defineBlockShow ? 'ep:arrow-up' : 'ep:arrow-down'"></icon>
        {{ defineBlockShow ? '折叠' : '展示' }}
        变量代码块
      </el-button>
      <el-input
        placeholder="添加备注"
        v-model="formData.notes"
        style="margin-left: 20px"
      ></el-input>
    </div>
    <div
      :hidden="!defineBlockShow"
      ref="defineEditorContainer"
      style="height: 30%; border: #bfbfbf 1px solid; border-radius: 4px; margin-bottom: 6px"
    ></div>
    <div
      ref="editorContainer"
      style="height: 100%; border: #bfbfbf 1px solid; border-radius: 4px; margin-bottom: 6px"
    ></div>
  </div>
</template>

<script lang="ts" setup name="Rcode">
import { toRaw } from 'vue'
import * as monaco from 'monaco-editor'
import * as CodeApi from '@/api/sca/code'

const { t } = useI18n() // 国际化

// Monaco编辑器
const editorContainer = ref<any>(null)
const defineEditorContainer = ref<any>(null)
const defineEditor = ref<any>(null)
const editor = ref<any>(null)

let contentValue = 'Code is Loading...' as string
let defineContentValue = 'Code is Loading...' as string

const defineBlockShow = ref(false)

const formData = ref({
  defineCode: '',
  mainCode: '',
  notes: ''
})

const message = useMessage() // 消息弹窗

const saveCode = async () => {
  formData.value.defineCode = defineContentValue
  formData.value.mainCode = contentValue

  const data = formData.value as unknown as CodeApi.CodeVO
  await CodeApi.createCode(data)
  message.success(t('common.success'))
}
const queryParams = reactive({
  pageNo: 1,
  pageSize: 1
})
const getList = async () => {
  const data = await CodeApi.getCodePage(queryParams)
  let tmp = data.list[0] as CodeApi.CodeVO
  console.log(tmp)
  toRaw(defineEditor.value).setValue(tmp.defineCode)
  toRaw(editor.value).setValue(tmp.mainCode)

  defineContentValue = tmp.defineCode
  contentValue = tmp.mainCode
  formData.value.notes = ''
}

onMounted(() => {
  editor.value = monaco.editor.create(editorContainer.value, {
    value: contentValue,
    language: 'r',
    folding: true, // 是否折叠
    foldingHighlight: true, // 折叠等高线
    foldingStrategy: 'indentation', // 折叠方式  auto | indentation
    showFoldingControls: 'always', // 是否一直显示折叠 always | mouseover
    disableLayerHinting: true, // 等宽优化
    emptySelectionClipboard: false, // 空选择剪切板
    selectionClipboard: false, // 选择剪切板
    automaticLayout: true, // 自动布局
    codeLens: false, // 代码镜头
    scrollBeyondLastLine: false, // 滚动完最后一行后再滚动一屏幕
    colorDecorators: true, // 颜色装饰器
    accessibilitySupport: 'off', // 辅助功能支持  "auto" | "off" | "on"
    lineNumbers: 'on', // 行号 取值： "on" | "off" | "relative" | "interval" | function
    lineNumbersMinChars: 5, // 行号最小字符   number
    readOnly: false //是否只读  取值 true | false
  })
  editor.value.onDidChangeModelContent((val: any) => {
    //内容改变时给父组件实时返回值
    contentValue = toRaw(editor.value).getValue()
  })

  defineEditor.value = monaco.editor.create(defineEditorContainer.value, {
    value: contentValue,
    theme: 'vs-dark',
    language: 'r',
    folding: true, // 是否折叠
    foldingHighlight: true, // 折叠等高线
    foldingStrategy: 'indentation', // 折叠方式  auto | indentation
    showFoldingControls: 'always', // 是否一直显示折叠 always | mouseover
    disableLayerHinting: true, // 等宽优化
    emptySelectionClipboard: false, // 空选择剪切板
    selectionClipboard: false, // 选择剪切板
    automaticLayout: true, // 自动布局
    scrollBeyondLastLine: false, // 滚动完最后一行后再滚动一屏幕
    colorDecorators: true, // 颜色装饰器
    accessibilitySupport: 'off', // 辅助功能支持  "auto" | "off" | "on"
    lineNumbers: 'on', // 行号 取值： "on" | "off" | "relative" | "interval" | function
    lineNumbersMinChars: 5, // 行号最小字符   number
    readOnly: false //是否只读  取值 true | false
  })
  defineEditor.value.onDidChangeModelContent((val: any) => {
    //内容改变时给父组件实时返回值
    defineContentValue = toRaw(defineEditor.value).getValue()
  })

  getList()
})

const a__ = 1
</script>

<style scoped></style>
